<template>
  <Form :schema="schema" :model="model" :rules="rules" @submit="handleSubmit">
    <template #sale>
        <el-select>
            <el-option label="颜色" value="111"></el-option>
            <el-option label="大小" value="111"></el-option>
        </el-select>
        <el-button type="primary">添加</el-button>
        <el-table border>
            <el-table-column label="销售属性名" ></el-table-column>
            <el-table-column label="销售属性值列表"></el-table-column>
        </el-table>
    </template>
  </Form>
</template>

<script lang="ts">
export default {
    name:'FormTest'
}
</script>

<script lang="ts" setup>
    import Form from '@/components/Form/index.vue'

    import {reactive} from 'vue'
    import { ElMessage } from 'element-plus';


    const schema = reactive([
        {
            label:'sku名称',
            type:'input',
            prop:'skuName',
            props:{
                placeholder:'请输入sku名称'
            }
        },
        {
            label:'sku描述',
            type:'input',
            prop:'skuDesc',
            props:{
                type:'textarea',
                rows:3,
                placeholder:'请输入sku描述'
            }
        },
        {
            label:'sku品牌',
            type:'select',
            prop:'tmId',
            props:{
                placeholder:'请选择sku品牌'
            },
            selectOptions:[
                {
                    id:36754,
                    label:'壁纸',
                    value:36754
                },
                {
                    id:6,
                    value:6,
                    label:"VIVO"
                }
            ]
        },
        {
            label:'sku图片',
            type:"upload",
            prop:"skuImageList",
            props:{
                action:'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
                multiple:true,
                limit:2,
                "on-exceed":()=>{
                    ElMessage.warning('上传图片数量不能超过两张')
                }
            },
            tip:"上传图片只能是jpg或者png格式,大小不能超过100kb",
        },
        {
            label:'销售属性',
            type:'slot',
            slot:'sale',
            prop:'skuSaleAttrList'
        }
    ])



    const model = reactive({
        skuName:'',
        skuDesc:'',
        tmId:undefined,
        skuImageList:[],
        skuSaleAttrList:[]
    })

    const rules = reactive({
        skuName:[{required:true,message:'请输入sku名称',trigger:'blur'}],
        skuDesc:[{required:true,message:'请输入sku描述',trigger:'blur'}],
        tmId:[{required:true,message:'请选择sku品牌',trigger:'change'}],
        skuImageList:[
           {
            required:true,
            message:'请输入上传的sku图片列表',
            validator:(rule,value,callback)=>{
                if(value.length){
                    callback()
                }else{
                    callback('请上传图片')
                }
            }
           } 
        ],
        skuSaleAttrList:[
            {
                required:true,
                message:'请输入添加sku的销售属性',
                validator:(rule,value,callback)=>{
                    if(value.length){
                        callback()
                    }else{
                        callback('请输入添加的sku销售属性')
                    }
                }
            }
        ]
    })


    const handleSubmit = ()=>{
        console.log('submit触发了')
    }
</script>

<style>

</style>